<html>
  <head>
    <link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' type='text/css' href='/static/style.css'>
    <script src="/javascript/catalog-compiled.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?libraries=places&v=3.exp&sensor=false"></script>
    <script>
      var catalog;  // The global catalog object.

      function onload() {
        var USER_ID = '103590744688343980544';
        var ALBUM_ID = '5623384798111226017';
        var PAGE_SIZE = 8;
        catalog = new Catalog(USER_ID, ALBUM_ID, PAGE_SIZE);
        catalog.start();
      }
    </script>
    <title>
      The Seeker - Manage Catalog
    </title>
  </head>
  <body onload="onload()">
    <h1>The Seeker
      <img src="https://developers.google.com/appengine/images/appengine-noborder-120x30.gif" alt="Powered by Google App Engine" />
    
    </h1>
    <h2>Manage Catalog</h2>

    <div class="location-popup" style="display:none">
      <h3>
	Select a point on the map, and then double-click it.
	<input class="place-search-box"/>
	
	<button class="place-search-button" type="button">Search</button>
	<button class="cancel-button" type="button">Cancel</button>
      </h3>
	
      <div class="map-element">
      </div>
    </div>

    <div id="all-photos">
      <div id="editor-template" style="display:none" class="editor">
	<table width="100%">
	  <tr>
	    <td class="thumbnail-container" align="center">
	      <div class="status-message"></div>
	      <button type="button" class="refresh-button" style="display:none">Refresh</button>
	      <img class="thumbnail">
	    </td>
	    <td>
	      <div class="editor-container" style="display:none">
		<form class="editor-form">
		  <span class="heading">Title</span>
		  <input name="title" size="80"><br>
		  
		  <span class="heading">Description </span> <br>
		  <textarea class="description-input form" name="description" rows="3" cols="60">
		  </textarea><br>
		  
		  <span class="heading">Size</span>
		  <input name="size">
		  
		  <span class="heading">Date</span>
		  <input name="date">
		  
		  <span class="heading">Place</span>
		  <input name="place"><br>
		  
		  <span class="heading">Lat/</span>
		  <input name="latitude">
		  <span class="heading">Long</span>
		  <input name="longitude">
		  <button type="button" class="select-latlong">Map</button><br>

		  <div class="objlist">
		    <span class="heading">Entities Represented</span>
		    <input class="entity-input"><button type="button" class="add-entity-button">Add</button><br>
		    <div class="entity-list"></div>
		  </div>

		  <div class="objlist">
		    <span class="heading">Medium</span>
		    <input class="medium-input"><button type="button" class="add-medium-button">Add</button><br>
		    <div class="medium-list"></div>
		  </div>

		  <div class="objlist">
		    <span class="heading">Tags</span>
		    <input class="tag-input"><button type="button" class="add-tag-button">Add</button><br>
		    <div class="tag-list"></div>
		  </div>

		  <!-- Auto populated -->
		  <input type="hidden" class="input-picurl" name="picurl"></input>
		  <input type="hidden" class="catalog-id" name="catalog-id"></input>
		  
		  <button type="button" class="update-button">Update</button>
		</form>
	      </div>
	    </td>
	  </tr>
	</table>
      </div>
    </div>
  </body>

</html>
